import { View, Text, Image, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import './box.less';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
import { IPLAND_OSS_HOST } from '../../constant';
import 'taro-ui/dist/style/components/icon.scss';
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"
import TreasureDesc from '../components/treasureDesc'
import WMLoading from '@/pages/common/loading';
import Blank from './blank';
import { Modal } from '@wanmi/ui-taro';
import api from 'api';
;
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Box extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      refresherTriggered: false,
    };
  }

  getItemmBox(listData) {
    let {
      actions: { action },
    } = this.props;
    let toolsView = [];
    listData.map((item, index) => {
      toolsView.push(
        <View className="item" onClick={(e) => {
          this.showModal(item)
        }}>
          <Text className="title">{item.name}</Text>
          <Text className="period ">有效期至：{item.endDate}</Text>
          <Image className="giftImg" src={`${IPLAND_OSS_HOST}giftpack/box.png`} mode="heightFix" />
          <View className="contain">
            <View className="con">
              <Image className="img" src={`${IPLAND_OSS_HOST}giftpack/bean.png`} mode="heightFix" />
            </View>
            <View className="con">
              <Image className="img" src={`${IPLAND_OSS_HOST}giftpack/prop.png`} mode="heightFix" />
            </View>
            <View className="con">
              <Image className="img" src={`${IPLAND_OSS_HOST}giftpack/coin.png`} mode="heightFix" />
            </View>
          </View>
          <Text className='buy'
            onClick={(e) => {
              e.stopPropagation();
              item.purchaseStatus == 0 && Taro.login({
                async success(res: { code: any | PromiseLike<string>; errMsg: string }) {
                  if (res.code) {
                    let openid;
                    try {
                      openid = await api.payController.getLittleProgramOpenId(res.code);
                    } catch (e) {
                      Taro.showToast({
                        title: '系统异常,请稍后再试',
                        icon: 'none',
                        duration: 2000,
                      });
                      return;
                    }
                    await action.goToWeixinPay(openid, item.id);
                  } else {
                    console.log('PayList_获取code失败！' + res.errMsg);
                  }
                },
              });
            }}>{item.purchaseStatus == 0 ? '去购买' : item.purchaseStatus == 1 ? '已购买' : item.purchaseStatus == 2 ? '已售罄' : ''}</Text>
          <View className='priceBg'>
            <Text className="p-titlte">惊爆价</Text>
            <Text className="p-price">{item.price}</Text>
          </View>
        </View>,
      );
    });
    return toolsView;
  }

  showModal(data) {
    let {
      actions: { action },
    } = this.props;
    // action.commonChange('main.modalTitle', data.name)
    action.commonChange('main.description', data.description)
    action.commonChange('main.showTreasureDesc', true)
  }

  render() {
    let { main } = this.props || {};
    let {
      actions: { action },
      main: { boxData, form, totalPages, isLoadingList, showBoxModal, modalTitle, modalContent, showTreasureDesc },
    } = this.props;
    let { refresherTriggered } = this.state;
    return (
      <View>
        <View>{main.isLoadingList && <WMLoading />}</View>
        <ScrollView
          scrollY
          className="scroll-view-backpack"
        // onScrollToLower={this._onScrollToLower}
        // refresherEnabled={true}
        // refresherTriggered={refresherTriggered}
        // onRefresherRefresh={this._onRefresherRefresh}
        >
          <View className="PageGiftpackPropBox">
            {boxData && boxData.length > 0 ?
              <View className="toolsBox">{this.getItemmBox(boxData)}</View>
              : <Blank content="宝箱准备中~" />}
          </View>
          {/* {boxData && boxData.length != 0 && form.pageNum + 1 != totalPages && <View className="status">加载中</View>} */}
          {/* {!isLoadingList && boxData.length != 0 && form.pageNum + 1 == totalPages && (
            <View className="status">没有更多了</View>
          )} */}
        </ScrollView>
        {/* <Modal
          type="default"
          visible={showBoxModal}
          onCancel={async () => action.commonChange('main.showBoxModal', false)}
          onOk={async () => {
            action.commonChange('main.showBoxModal', false)
          }}
          title={modalTitle}
          content={modalContent}
        /> */}
        <AtModal
          isOpened={showBoxModal}
          title={modalTitle}
          confirmText='确认'
          onClose={() => action.commonChange('main.showBoxModal', false)}
          onConfirm={() => action.commonChange('main.showBoxModal', false)}
          content={modalContent}
        />
        <TreasureDesc isOpened={showTreasureDesc} onCancel={() => action.commonChange('main.showTreasureDesc', false)} />
      </View>
    );
  }

  _onRefresherRefresh = () => {
    const { refresherTriggered } = this.state;
    if (refresherTriggered) return;
    this.setState({
      refresherTriggered: true,
    });
    this.props.actions.action.commonChange('main.form.pageNum', 0);
    this.props.actions.init();
    setTimeout(() => {
      this.setState({
        refresherTriggered: false,
      });
    }, 2000);
  };


  _onScrollToLower = () => {
    this.props.actions.action.nextPage();
  };
}

//create by moon https://github.com/creasy2010/moon
